<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="../assets/favicon.ico">
<title>source\jindo.Tree.js - Jindo Component - AjaxUI@NHN</title>
<link rel="stylesheet" type="text/css" href="../assets/prettify/prettify-min.css" media="screen">
<script type="text/javascript">
	var isMobile = (function() {
		var r = window.devicePixelRatio || 1;
		if (/windows phone/i.test(navigator.userAgent)) { r = 2; }
		
		var s = Math.max(screen.width / r, screen.height / r);
		
		var m = s < 1024;
		var href = m ? "api.mobile.css" : "api.css";
		document.write('<link rel="stylesheet" type="text/css" href="../assets/' + href + '" media="screen">');
		
		return m;
	})();
</script>

<script type="text/javascript" src="../assets/jindo.desktop.min.js"></script>
<script type="text/javascript" src="../assets/jindo_component.min.js"></script>
</head>
<body class="api-page">
<div id="wrap" class="api-main"><!-- 2Depth 접기 : lft_fold 추가 -->

	<div id="header">
		<h1><a href="../index.html"><span class="blind">JindoJS</span></a></h1>
		<div class="info">
			<span class="version">version 1.6.0</span>
			<span class="bar">|</span>
			<span class="help"><span class="ic_help"></span><a href="http://devcode.nhncorp.com/projects/jindo-component/issue" target="_blank">버그신고/문의</a></span>
		</div>
		<div class="menu">
			<button type="button" id="toggle_search_btn" class="btn_sch"><span class="blind">검색</span></button>
			<button type="button" id="toggle_list_btn" class="btn_snb btn_snb_on"><span class="blind">메뉴</span></button>
			<!-- [D] 클릭시 btn_sch_on,btn_snb_on 추가 -->
		</div>
	</div>

	<!-- sch_frm -->
	<div class="sch_frm hide_when_small">
		<h2 class="blind">검색</h2>
		<div class="filter">
			<input type="search" id="api-filter" placeholder="검색어를 입력하세요.">
		</div>
		<div id="search-tab" style="display:none;">
			<ul class="tabs">
			<li class="tc-tab">전체</li>
			<li class="tc-tab">키워드</li>
			<li class="tc-tab">클래스</li>
			<li class="tc-tab">메서드</li>
			<li class="tc-tab">프로퍼티</li>
			<li class="tc-tab">이벤트</li>
			</ul>
			<div class="panels">
				<ul id="api-all" class="tc-panel"></ul>
				<ul id="api-keywords" class="tc-panel"></ul>
				<ul id="api-classes" class="tc-panel"></ul>
				<ul id="api-methods" class="tc-panel"></ul>
				<ul id="api-attrs" class="tc-panel"></ul>
				<ul id="api-events" class="tc-panel"></ul>
			</div>

		</div>
	</div>
	<!-- // sch_frm -->

	<!-- container -->
	<div id="container">
		<!-- left-columns -->
		<div id="left-columns" class="sidemenu has_scrollbar">
			<h2 class="blind"><a href="../index.html"><span>APIs</span></a></h2>
<div class="snb depth1 scrollbar hide_when_small">
	<!-- [D] style="width:135px; height:384px; -->
	<div class="scrollbar-box">
		<div class="scrollbar-content">
			<div><ul>
			            <li class="">
			            	<a href="../classes/jindo.Accordion.html" class="">
			                	Accordion
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.AjaxHistory.html" class="">
			                	AjaxHistory
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.BrowseButton.html" class="">
			                	BrowseButton
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Cache.html" class="">
			                	Cache
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Calendar.html" class="">
			                	Calendar
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Canvas.html" class="">
			                	Canvas
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.CheckBox.html" class="">
			                	CheckBox
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.CircularRolling.html" class="">
			                	CircularRolling
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Clipboard.html" class="">
			                	Clipboard
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Component.html" class="">
			                	Component
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DataBridge.html" class="">
			                	DataBridge
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DatePicker.html" class="">
			                	DatePicker
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DefaultTextValue.html" class="">
			                	DefaultTextValue
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Dialog.html" class="">
			                	Dialog
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DragArea.html" class="">
			                	DragArea
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DropArea.html" class="">
			                	DropArea
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DynamicTree.html" class="">
			                	DynamicTree
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Effect.html" class="">
			                	Effect
								
								

							    
						        
						            <span class="flag static" title="static"><span class="blind">static</span></span>
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.FileUploader.html" class="">
			                	FileUploader
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.FloatingLayer.html" class="">
			                	FloatingLayer
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Foggy.html" class="">
			                	Foggy
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Formatter.html" class="">
			                	Formatter
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.HTMLComponent.html" class="">
			                	HTMLComponent
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.InlineTextEdit.html" class="">
			                	InlineTextEdit
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.LayerEffect.html" class="">
			                	LayerEffect
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.LayerManager.html" class="">
			                	LayerManager
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.LayerPosition.html" class="">
			                	LayerPosition
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.LazyLoading.html" class="">
			                	LazyLoading
								
								

							    
						        
						            <span class="flag static" title="static"><span class="blind">static</span></span>
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.ModalDialog.html" class="">
			                	ModalDialog
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.MouseGesture.html" class="">
			                	MouseGesture
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.MultipleAjaxRequest.html" class="">
			                	MultipleAjaxRequest
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.NumberFormatter.html" class="">
			                	NumberFormatter
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.NumericStepper.html" class="">
			                	NumericStepper
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Pagination.html" class="">
			                	Pagination
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Rolling.html" class="">
			                	Rolling
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.RollingChart.html" class="">
			                	RollingChart
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.RolloverArea.html" class="">
			                	RolloverArea
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.RolloverClick.html" class="">
			                	RolloverClick
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.ScrollBar.html" class="">
			                	ScrollBar
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.ScrollBox.html" class="">
			                	ScrollBox
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.SelectArea.html" class="">
			                	SelectArea
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.SelectBox.html" class="">
			                	SelectBox
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Slider.html" class="">
			                	Slider
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.StarRating.html" class="">
			                	StarRating
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.TabControl.html" class="">
			                	TabControl
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.TextRange.html" class="">
			                	TextRange
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Timer.html" class="">
			                	Timer
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Transition.html" class="">
			                	Transition
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Tree.html" class="">
			                	Tree
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.UIComponent.html" class="">
			                	UIComponent
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.UploadQueue.html" class="">
			                	UploadQueue
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.WatchInput.html" class="">
			                	WatchInput
								
								

							    
						        
			            	</a>
			            </li>
			        </ul></div>
		</div>
	</div>
	<div class="scrollbar-v">
		<div class="scrollbar-button-up"></div>
		<div class="scrollbar-track">
			<div class="scrollbar-thumb" style="top: 0px; height: 222px; "></div>
		</div>
		<div class="scrollbar-button-down"></div>
	</div>
</div>


<button type="button" title="펼치기" class="btn_open">바로가기 열기<span class="ic"></span></button>
<button type="button" title="접기" class="btn_close">바로가기 닫기<span class="ic"></span></button>

		</div>
		<!-- // left-columns -->

		<!-- main content -->
		<div id="main">
			<div class="main_fix">
				<div class="content">
	
	<h1 class="blind">source/jindo.Tree.js</h1>
	<div class="tc-panel first">
		<dl class="relation">
			<dt>파일명</dt>
			<dd>jindo.Tree.js</dd>
			<dt>경로</dt>
			<dd>source/</dd>
		</dl>
		<div id="file" class="file">
		    <pre class="code prettyprint linenums">/**
	@fileOverview&nbsp;트리구조를&nbsp;표현하는&nbsp;컴포넌트
	@author&nbsp;hooriza,&nbsp;modified&nbsp;by&nbsp;senxation
	@version&nbsp;#__VERSION__#
**/
/**
	트리구조를&nbsp;표현하는&nbsp;컴포넌트
	
	@class&nbsp;jindo.Tree
	@extends&nbsp;jindo.UIComponent
	@keyword&nbsp;tree,&nbsp;트리
**/
jindo.Tree&nbsp;=&nbsp;jindo.$Class({
	/**&nbsp;@lends&nbsp;jindo.Tree.prototype&nbsp;*/
	
	_bIsActivating&nbsp;:&nbsp;false,&nbsp;//컴포넌트의&nbsp;활성화&nbsp;여부
	_sTemplate&nbsp;:&nbsp;null,
	_htNodeData&nbsp;:&nbsp;null,
	_el&nbsp;:&nbsp;null,
	_elSelectedNode&nbsp;:&nbsp;null,
	
	/**
		Tree&nbsp;컴포넌트를&nbsp;생성한다.
		
		@constructor
		@param&nbsp;{HTMLElement}&nbsp;el&nbsp;적용할&nbsp;트리&nbsp;엘리먼트&nbsp;
		@param&nbsp;{Object}&nbsp;[htOption]&nbsp;옵션객체
			@param&nbsp;{String}&nbsp;[htOption.sClassPrefix=&quot;tree-&quot;]&nbsp;클래스명&nbsp;접두어
			@param&nbsp;{String}&nbsp;[htOption.sEventSelect=&quot;click&quot;]&nbsp;노드&nbsp;선택을&nbsp;위한&nbsp;이벤트명
			@param&nbsp;{String}&nbsp;[htOption.sEventExpand=&quot;dblclick&quot;]&nbsp;자식노드를&nbsp;펼치거나&nbsp;접을&nbsp;이벤트명
			@param&nbsp;{Boolean}&nbsp;[htOption.bExpandOnSelect=true]&nbsp;레이블을&nbsp;클릭하여&nbsp;선택했을때도&nbsp;노드를&nbsp;펼칠지&nbsp;여부
			@param&nbsp;{Boolean}&nbsp;[htOption.bActivateOnload=true]&nbsp;로드시&nbsp;activate()&nbsp;수행여부
		@example
			tree&nbsp;=&nbsp;new&nbsp;jindo.Tree(jindo.$(&#39;tree&#39;),&nbsp;{&nbsp;
				sClassPrefix&nbsp;:&nbsp;&#39;tree-&#39;,&nbsp;//Class&nbsp;Prefix
				sEventSelect&nbsp;:&nbsp;&quot;click&quot;,&nbsp;//노드&nbsp;선택을&nbsp;위한&nbsp;이벤트명
				sEventExpand&nbsp;:&nbsp;&quot;dblclick&quot;,&nbsp;//자식노드를&nbsp;펼치거나&nbsp;접을&nbsp;이벤트명
				bExpandOnSelect&nbsp;:&nbsp;true,&nbsp;//레이블을&nbsp;클릭하여&nbsp;선택했을때도&nbsp;노드를&nbsp;펼칠지&nbsp;여부
				bActivateOnload&nbsp;:&nbsp;true&nbsp;//로드시&nbsp;activate()&nbsp;수행여부
			}).attach({
				click&nbsp;:&nbsp;function(oCustomEvent)&nbsp;{&nbsp;//sEventExpand&nbsp;값이&nbsp;&quot;click&quot;&nbsp;일&nbsp;경우
					//자식노드를&nbsp;펼치거나&nbsp;접기위해&nbsp;sEventSelect&nbsp;옵션으로&nbsp;지정된&nbsp;이벤트가&nbsp;발생할&nbsp;때
					//전달되는&nbsp;이벤트객체&nbsp;oCustomEvent&nbsp;=&nbsp;{
					//	element&nbsp;:&nbsp;(HTMLElement)&nbsp;선택된&nbsp;노드
					//	weEvent&nbsp;:&nbsp;(jindo.$Event)&nbsp;클릭&nbsp;이벤트&nbsp;객체
					//}
					//oCustomEvent.stop();&nbsp;수행시&nbsp;노드를&nbsp;선택하지&nbsp;않음
				},
				beforeSelect&nbsp;:&nbsp;function(oCustomEvent)&nbsp;{
					//노드가&nbsp;선택되기&nbsp;전&nbsp;발생
					//전달되는&nbsp;이벤트객체&nbsp;oCustomEvent&nbsp;=&nbsp;{
					//	element&nbsp;:&nbsp;(HTMLElement)&nbsp;선택된&nbsp;노드
					//}
					//oCustomEvent.stop()&nbsp;수행시&nbsp;뒤이어&nbsp;일어나는&nbsp;select&nbsp;이벤트는&nbsp;발생하지&nbsp;않는다.
				},
				select&nbsp;:&nbsp;function(oCustomEvent)&nbsp;{
					//노드가&nbsp;선택되었을&nbsp;때&nbsp;발생
					//전달되는&nbsp;이벤트객체&nbsp;oCustomEvent&nbsp;=&nbsp;{
					//	element&nbsp;:&nbsp;(HTMLElement)&nbsp;선택된&nbsp;노드
					//}
				},
				dblclick&nbsp;:&nbsp;function(oCustomEvent)&nbsp;{&nbsp;//sEventExpand&nbsp;값이&nbsp;&quot;dblclick&quot;&nbsp;일&nbsp;경우
					//자식노드를&nbsp;펼치거나&nbsp;접기위해&nbsp;sEventExpand&nbsp;옵션으로&nbsp;지정된&nbsp;이벤트가&nbsp;발생할&nbsp;때
					//전달되는&nbsp;이벤트객체&nbsp;oCustomEvent&nbsp;=&nbsp;{
					//	element&nbsp;:&nbsp;(HTMLElement)&nbsp;이벤트가&nbsp;발생한&nbsp;노드
					//	weEvent&nbsp;:&nbsp;(jindo.$Event)&nbsp;더블클릭&nbsp;이벤트&nbsp;객체
					//}
					//oCustomEvent.stop();&nbsp;수행시&nbsp;자식노드를&nbsp;펼치거나&nbsp;접지&nbsp;않음
				},
				beforeExpand&nbsp;:&nbsp;function(oCustomEvent)&nbsp;{
					//노드가&nbsp;펼쳐지기&nbsp;전에&nbsp;발생
					//전달되는&nbsp;이벤트객체&nbsp;oCustomEvent&nbsp;=&nbsp;{
					//	element&nbsp;:&nbsp;(HTMLElement)&nbsp;선택된&nbsp;노드
					//}
					//oCustomEvent.stop()&nbsp;수행시&nbsp;뒤이어&nbsp;일어나는&nbsp;select&nbsp;이벤트는&nbsp;발생하지&nbsp;않는다.
				},
				expand&nbsp;:&nbsp;function(oCustomEvent)&nbsp;{
					//노드가&nbsp;펼쳐진&nbsp;후&nbsp;발생
					//전달되는&nbsp;이벤트객체&nbsp;oCustomEvent&nbsp;=&nbsp;{
					//	element&nbsp;:&nbsp;(HTMLElement)&nbsp;선택된&nbsp;노드
					//}
				},
				beforeCollapse&nbsp;:&nbsp;function(oCustomEvent)&nbsp;{
					//노드가&nbsp;접혀지기&nbsp;전에&nbsp;발생
					//전달되는&nbsp;이벤트객체&nbsp;oCustomEvent&nbsp;=&nbsp;{
					//	element&nbsp;:&nbsp;(HTMLElement)&nbsp;선택된&nbsp;노드
					//}
					//oCustomEvent.stop()&nbsp;수행시&nbsp;뒤이어&nbsp;일어나는&nbsp;collapse&nbsp;이벤트는&nbsp;발생하지&nbsp;않는다.
				},
				collapse&nbsp;:&nbsp;function(oCustomEvent)&nbsp;{
					//노드가&nbsp;접혀진&nbsp;후&nbsp;발생
					//전달되는&nbsp;이벤트객체&nbsp;oCustomEvent&nbsp;=&nbsp;{
					//	element&nbsp;:&nbsp;(HTMLElement)&nbsp;선택된&nbsp;노드
					//}
				},
				beforeProcessData&nbsp;:&nbsp;function(oCustomEvent)&nbsp;{
					//노드를&nbsp;생성할&nbsp;때&nbsp;(createNode)&nbsp;발생한다.
					//sTemplate에&nbsp;data를&nbsp;파싱해&nbsp;넣는&nbsp;동작을&nbsp;커스터마이징&nbsp;할&nbsp;수&nbsp;있다.&nbsp;&nbsp;
					//전달되는&nbsp;이벤트객체&nbsp;oCustomEvent&nbsp;=&nbsp;{
					//	sTemplate&nbsp;:&nbsp;(String)&nbsp;&#39;&lt;li&nbsp;class=&quot;{=nodeClass}{if&nbsp;lastNode}&nbsp;{=lastNodeClass}{/if}&quot;&gt;&lt;div{if&nbsp;hasChild}&nbsp;class=&quot;{=hasChildClass}&quot;{/if}&gt;&lt;button&nbsp;class=&quot;{=buttonClass}&quot;&gt;+&lt;/button&gt;&lt;span&nbsp;class=&quot;{=labelClass}&quot;&nbsp;unselectable=&quot;on&quot;&gt;{=text}&lt;/span&gt;&lt;/div&gt;&lt;/li&gt;&#39;;
					//	htData&nbsp;:&nbsp;(HashTable)&nbsp;처리중인&nbsp;데이터&nbsp;객체
					//}
				}
			});
	**/
	$init&nbsp;:&nbsp;function(el,&nbsp;htOption)&nbsp;{
		this.option({&nbsp;
			sClassPrefix&nbsp;:&nbsp;&#39;tree-&#39;,&nbsp;//Default&nbsp;Class&nbsp;Prefix
			sEventSelect&nbsp;:&nbsp;&quot;click&quot;,&nbsp;//노드&nbsp;선택을&nbsp;위한&nbsp;이벤트명
			sEventExpand&nbsp;:&nbsp;&quot;dblclick&quot;,&nbsp;//자식노드를&nbsp;펼치거나&nbsp;접을&nbsp;이벤트명
			bExpandOnSelect&nbsp;:&nbsp;true,&nbsp;//레이블을&nbsp;클릭하여&nbsp;선택했을때도&nbsp;노드를&nbsp;펼칠지&nbsp;여부
			bActivateOnload&nbsp;:&nbsp;true&nbsp;//로드시&nbsp;activate()&nbsp;수행여부
		});
		this.option(htOption&nbsp;||&nbsp;{});
		
		var&nbsp;sPrefix&nbsp;=&nbsp;this.option(&#39;sClassPrefix&#39;);
		
		//클래스명들
		this.htClassName&nbsp;=&nbsp;{
			sNode&nbsp;:&nbsp;sPrefix&nbsp;+&nbsp;&quot;node&quot;,
			sLastNode&nbsp;:&nbsp;sPrefix&nbsp;+&nbsp;&quot;last-node&quot;,
			sHasChild&nbsp;:&nbsp;sPrefix&nbsp;+&nbsp;&quot;has-child&quot;,
			sButton&nbsp;:&nbsp;sPrefix&nbsp;+&nbsp;&quot;button&quot;,
			sLabel&nbsp;:&nbsp;sPrefix&nbsp;+&nbsp;&quot;label&quot;,
			sSelected&nbsp;:&nbsp;sPrefix&nbsp;+&nbsp;&quot;selected&quot;,
			sCollapsed&nbsp;:&nbsp;sPrefix&nbsp;+&nbsp;&quot;collapsed&quot;
		};
		
		this.setNodeTemplate(&#39;&lt;li&nbsp;class=&quot;{=sNodeClass}{if&nbsp;bLastNode}&nbsp;{=sLastNodeClass}{/if}&quot;&gt;&lt;div{if&nbsp;bHasChild}&nbsp;class=&quot;{=sHasChildClass}&quot;{/if}&gt;&lt;button&nbsp;class=&quot;{=sButtonClass}&quot;&gt;+&lt;/button&gt;&lt;span&nbsp;class=&quot;{=sLabelClass}&quot;&nbsp;unselectable=&quot;on&quot;&gt;{=sText}&lt;/span&gt;&lt;/div&gt;&lt;/li&gt;&#39;);
		this._htNodeData&nbsp;=&nbsp;{};
		
		el&nbsp;=&nbsp;jindo.$(el);
		this._setRootList(el);
		
&nbsp;		this._wfSelectHandler&nbsp;=&nbsp;jindo.$Fn(this._onSelectEvent,&nbsp;this);
		this._wfExpandHandler&nbsp;=&nbsp;jindo.$Fn(this._onExpandEvent,&nbsp;this);
		
		this._makeNodeDataKeyFromHTML();&nbsp;//data를&nbsp;마크업으로부터&nbsp;nodedata를&nbsp;생성하고&nbsp;데이터를&nbsp;기반으로&nbsp;paint
		this.paintAllNodes();
		
		var&nbsp;elDefaultSelectedNode&nbsp;=&nbsp;jindo.$$.getSingle(&#39;.&#39;&nbsp;+&nbsp;this.htClassName.sNode&nbsp;+&nbsp;&#39;&nbsp;&gt;&nbsp;.&#39;&nbsp;+&nbsp;this.htClassName.sSelected,&nbsp;this.getRootList());
		if&nbsp;(elDefaultSelectedNode)&nbsp;{
			this._setSelectedNode(this.getNode(elDefaultSelectedNode));
		}
		
		if(this.option(&quot;bActivateOnload&quot;))&nbsp;{
			this.activate();&nbsp;//컴포넌트를&nbsp;활성화한다.	
		}
	},
	
	/**
		컴포넌트를&nbsp;활성화한다.
		@return&nbsp;{this}
	**/
	_onActivate&nbsp;:&nbsp;function()&nbsp;{
		var&nbsp;el&nbsp;=&nbsp;this.getRootList();
		jindo.$Element.prototype.preventTapHighlight&nbsp;&amp;&amp;&nbsp;jindo.$Element(el).preventTapHighlight(true);
		this._wfSelectHandler.attach(el,&nbsp;this.option(&quot;sEventSelect&quot;));
		this._wfExpandHandler.attach(el,&nbsp;this.option(&quot;sEventExpand&quot;));
	},
	
	/**
		컴포넌트를&nbsp;비활성화한다.
		@return&nbsp;{this}
	**/
	_onDeactivate&nbsp;:&nbsp;function()&nbsp;{
		var&nbsp;el&nbsp;=&nbsp;this.getRootList();
		jindo.$Element.prototype.preventTapHighlight&nbsp;&amp;&amp;&nbsp;jindo.$Element(el).preventTapHighlight(false);
		this._wfSelectHandler.detach(el,&nbsp;this.option(&quot;sEventSelect&quot;));
		this._wfExpandHandler.detach(el,&nbsp;this.option(&quot;sEventExpand&quot;));
	},
	
	_onSelectEvent&nbsp;:&nbsp;function(we)&nbsp;{
		var&nbsp;el&nbsp;=&nbsp;we.element;
		var&nbsp;elNode&nbsp;=&nbsp;this.getNode(el);
		if&nbsp;(!elNode)&nbsp;{
			return;
		}
		
		var&nbsp;elButton&nbsp;=&nbsp;jindo.$$.test(el,&nbsp;&#39;.&#39;&nbsp;+&nbsp;this.htClassName.sButton)&nbsp;?&nbsp;el&nbsp;:&nbsp;jindo.$$.getSingle(&#39;!&nbsp;.&#39;&nbsp;+&nbsp;this.htClassName.sButton,&nbsp;el);
		if&nbsp;(elButton)&nbsp;{
			if&nbsp;(this.isCollapsed(elNode))&nbsp;{
				this.expandNode(elNode);
			}&nbsp;else&nbsp;{
				this.collapseNode(elNode);
			}
			return;
		}
		
		var&nbsp;elLabel&nbsp;=&nbsp;jindo.$$.test(el,&nbsp;&#39;.&#39;&nbsp;+&nbsp;this.htClassName.sLabel)&nbsp;?&nbsp;el&nbsp;:&nbsp;jindo.$$.getSingle(&#39;!&nbsp;.&#39;&nbsp;+&nbsp;this.htClassName.sLabel,&nbsp;el);
		if&nbsp;(elLabel)&nbsp;{
			var&nbsp;htPart&nbsp;=&nbsp;this.getPartsOfNode(elNode);
			if&nbsp;(htPart.elItem)&nbsp;{
				/**
					자식노드를&nbsp;펼치거나&nbsp;접기위해&nbsp;sEventSelect&nbsp;옵션으로&nbsp;지정된&nbsp;이벤트가&nbsp;발생할&nbsp;때
					(이벤트&nbsp;이름은&nbsp;sEventSelect&nbsp;옵션명에&nbsp;따름)
					
					@event&nbsp;click
					@param&nbsp;{String}&nbsp;sType&nbsp;커스텀&nbsp;이벤트명
					@param&nbsp;{HTMLElement}&nbsp;element&nbsp;선택될&nbsp;노드
					@param&nbsp;{jindo.$Event}&nbsp;weEvent&nbsp;클릭&nbsp;이벤트&nbsp;객체
					@param&nbsp;{Function}&nbsp;stop&nbsp;수행시&nbsp;노드를&nbsp;선택하지&nbsp;않음
					@example
						//&nbsp;커스텀&nbsp;이벤트&nbsp;핸들링&nbsp;예제
						oTree.attach(&quot;click&quot;,&nbsp;function(oCustomEvent)&nbsp;{&nbsp;...&nbsp;});
				**/
				if&nbsp;(this.fireEvent(we.type,&nbsp;{&nbsp;element&nbsp;:&nbsp;elNode,&nbsp;weEvent&nbsp;:&nbsp;we&nbsp;}))&nbsp;{
					this.selectNode(elNode);
				}
			}
		}&nbsp;
	},
	
	_onExpandEvent&nbsp;:&nbsp;function(we)&nbsp;{
		var&nbsp;el&nbsp;=&nbsp;we.element;
		var&nbsp;elNode&nbsp;=&nbsp;this.getNode(el);
		if&nbsp;(!elNode&nbsp;||&nbsp;!this.hasChild(elNode))&nbsp;{
			return;
		}
		
		var&nbsp;elLabel&nbsp;=&nbsp;jindo.$$.test(el,&nbsp;&#39;.&#39;&nbsp;+&nbsp;this.htClassName.sLabel)&nbsp;?&nbsp;el&nbsp;:&nbsp;jindo.$$.getSingle(&#39;!&nbsp;.&#39;&nbsp;+&nbsp;this.htClassName.sLabel,&nbsp;el);
		if&nbsp;(elLabel)&nbsp;{
			var&nbsp;htParam&nbsp;=&nbsp;{&nbsp;element&nbsp;:&nbsp;elNode,&nbsp;weEvent&nbsp;:&nbsp;we&nbsp;};
			var&nbsp;htPart&nbsp;=&nbsp;this.getPartsOfNode(elNode);
			if&nbsp;(htPart.elItem&nbsp;&amp;&amp;&nbsp;jindo.$Element(htPart.elItem).visible())&nbsp;{
				if&nbsp;(this.isCollapsed(elNode))&nbsp;{
					/**
						자식노드를&nbsp;펼치거나&nbsp;접기위해&nbsp;sEventExpand&nbsp;옵션으로&nbsp;지정된&nbsp;이벤트가&nbsp;발생할&nbsp;때
						(이벤트&nbsp;이름은&nbsp;sEventExpand&nbsp;옵션명에&nbsp;따름)
						
						@event&nbsp;dblclick
						@param&nbsp;{String}&nbsp;sType&nbsp;커스텀&nbsp;이벤트명
						@param&nbsp;{HTMLElement}&nbsp;element&nbsp;이벤트가&nbsp;발생한&nbsp;노드
						@param&nbsp;{jindo.$Event}&nbsp;weEvent&nbsp;더블클릭&nbsp;이벤트&nbsp;객체
						@param&nbsp;{Function}&nbsp;stop&nbsp;수행시&nbsp;노드를&nbsp;자식노드를&nbsp;펼치거나&nbsp;접지&nbsp;않음
						@example
							//&nbsp;커스텀&nbsp;이벤트&nbsp;핸들링&nbsp;예제
							oTree.attach(&quot;dblclick&quot;,&nbsp;function(oCustomEvent)&nbsp;{&nbsp;...&nbsp;});
					**/
					if&nbsp;(this.fireEvent(we.type,&nbsp;htParam))&nbsp;{
						this.expandNode(elNode);
					}
				}&nbsp;else&nbsp;{
					if&nbsp;(!this._bExpandOnSelect)&nbsp;{
						if&nbsp;(this.fireEvent(we.type,&nbsp;htParam))&nbsp;{
							this.collapseNode(elNode);
						}
					}
				}
			}
		}
	},
	
	//paint관련
	/**
		노드를&nbsp;새로&nbsp;그린다.
		
		@method&nbsp;paintNode
		@param&nbsp;{HTMLElement}&nbsp;elNode
		@param&nbsp;{Boolean}&nbsp;bPaintChild&nbsp;자식노드도&nbsp;새로&nbsp;그릴지&nbsp;여부&nbsp;(Default&nbsp;:&nbsp;true)
		@return&nbsp;{this}
	**/
	paintNode&nbsp;:&nbsp;function(elNode,&nbsp;bPaintChild)&nbsp;{
		if&nbsp;(typeof&nbsp;bPaintChild&nbsp;==&nbsp;&quot;undefined&quot;)&nbsp;{
			bPaintChild&nbsp;=&nbsp;true;
		}
		
		this._paintNode(elNode);
		
		if&nbsp;(bPaintChild)&nbsp;{
			var&nbsp;aNodes&nbsp;=&nbsp;this.getChildNodes(elNode);
			for&nbsp;(var&nbsp;i&nbsp;=&nbsp;0;&nbsp;i&nbsp;&lt;&nbsp;aNodes.length;&nbsp;i++)&nbsp;{
				this.paintNode(aNodes[i]);
			}
		}
		
		return&nbsp;this;
	},
	
	/**
		모든&nbsp;노드를&nbsp;새로&nbsp;그린다.
		
		@method&nbsp;paintAllNodes
		@param&nbsp;{HTMLElement}&nbsp;[elNode]&nbsp;새로&nbsp;그릴&nbsp;기준&nbsp;노드
		@return&nbsp;{this}
	**/
	paintAllNodes&nbsp;:&nbsp;function(elNode)&nbsp;{
		this.paintNode(elNode&nbsp;||&nbsp;this.getRootNode());
		return&nbsp;this;
	},
	
	/**
		노드를&nbsp;새로&nbsp;그린다.&nbsp;(자식노드가&nbsp;있거나&nbsp;마지막&nbsp;노드일경우&nbsp;클래스명&nbsp;처리)
		@ignore
		@param&nbsp;{HTMLElement}&nbsp;elNode
	**/
	_paintNode&nbsp;:&nbsp;function(elNode)&nbsp;{
		if&nbsp;(!elNode)&nbsp;{
			return;
		}
		var&nbsp;htPart&nbsp;=&nbsp;this.getPartsOfNode(elNode);
		var&nbsp;aChildNodes&nbsp;=&nbsp;this.getChildNodes(elNode);
		var&nbsp;htNodeData&nbsp;=&nbsp;this.getNodeData(elNode);
		var&nbsp;welNode&nbsp;=&nbsp;jindo.$Element(elNode);&nbsp;
		var&nbsp;welItem&nbsp;=&nbsp;jindo.$Element(htPart.elItem);

		delete&nbsp;htNodeData[&quot;_aChildren&quot;];&nbsp;//자식이&nbsp;없으면&nbsp;_aChildren&nbsp;제거
		
		//자식이&nbsp;있는지&nbsp;여부		
		if&nbsp;(this.hasChild(elNode))&nbsp;{
			welItem.addClass(this.htClassName.sHasChild);
			htNodeData[&quot;bHasChild&quot;]&nbsp;=&nbsp;true;
			htNodeData[&quot;_aChildren&quot;]&nbsp;=&nbsp;[];
			
			var&nbsp;self&nbsp;=&nbsp;this;
			jindo.$A(aChildNodes).forEach(function(elNode,&nbsp;i){
				htNodeData[&quot;_aChildren&quot;].push(self.getNodeData(elNode));
			});
		}&nbsp;else&nbsp;{
			htNodeData[&quot;bHasChild&quot;]&nbsp;=&nbsp;false;
			welItem.removeClass(this.htClassName.sHasChild);
			if&nbsp;(htPart.elChild)&nbsp;{
				htPart.elChild.parentNode.removeChild(htPart.elChild);	
			}
		}
		
		//마지막&nbsp;노드인지
		htNodeData[&quot;bLastNode&quot;]&nbsp;=&nbsp;jindo.$$.getSingle(&#39;~&nbsp;.&#39;&nbsp;+&nbsp;this.htClassName.sNode,&nbsp;elNode)&nbsp;?&nbsp;false&nbsp;:&nbsp;true;
		if&nbsp;(htNodeData[&quot;bLastNode&quot;])&nbsp;{
			welNode.addClass(this.htClassName.sLastNode);
		}&nbsp;else&nbsp;{
			welNode.removeClass(this.htClassName.sLastNode);
		}
		elNode.parentNode.style.zoom&nbsp;=&nbsp;1;&nbsp;//ie&nbsp;렌더링&nbsp;버그&nbsp;수정!!
	},
	
	/**
		노드에&nbsp;적용될&nbsp;템플릿을&nbsp;가져온다.
		
		@method&nbsp;getNodeTemplate
		@return&nbsp;{String}
		@example
			oTree.getNodeTemplate();
			기본&nbsp;값&nbsp;-&gt;&nbsp;&#39;&lt;li&nbsp;class=&quot;{=sNodeClass}{if&nbsp;bLastNode}&nbsp;{=sLastNodeClass}{/if}&quot;&gt;&lt;div{if&nbsp;bHasChild}&nbsp;class=&quot;{=sHasChildClass}&quot;{/if}&gt;&lt;button&nbsp;class=&quot;{=sButtonClass}&quot;&gt;+&lt;/button&gt;&lt;span&nbsp;class=&quot;{=sLabelClass}&quot;&gt;{=sText}&lt;/span&gt;&lt;/div&gt;&lt;/li&gt;&#39;
			
			//템플릿에&nbsp;process될&nbsp;값들의&nbsp;Hash&nbsp;Table
			var&nbsp;htProcess&nbsp;=&nbsp;{
				sNodeClass&nbsp;:&nbsp;노드의&nbsp;클래스명
				bLastNode&nbsp;:&nbsp;노드가&nbsp;마지막인지&nbsp;여부&nbsp;
				sLastNodeClass&nbsp;:&nbsp;마지막&nbsp;노드의&nbsp;&nbsp;클래스명
				bHasChild&nbsp;:&nbsp;노드가&nbsp;자식을&nbsp;가지는&nbsp;지&nbsp;여부
				sHasChildClass&nbsp;:&nbsp;자식을&nbsp;가지는&nbsp;경우의&nbsp;클래스명
				sCollapsedClass&nbsp;:&nbsp;접혀진&nbsp;노드의&nbsp;클래스명
				sButtonClass&nbsp;:&nbsp;접기/펼치기&nbsp;버튼의&nbsp;클래스명
				sLabelClass&nbsp;:&nbsp;레이블의&nbsp;클래스명
				sText&nbsp;:&nbsp;노드의&nbsp;이름&nbsp;(텍스트)
			};
	**/
	getNodeTemplate&nbsp;:&nbsp;function()&nbsp;{
		return&nbsp;this._sTemplate;
	},
	/**
		노드&nbsp;생성시&nbsp;노드에&nbsp;적용될&nbsp;템플릿을&nbsp;설정한다.
		
		@method&nbsp;setNodeTemplate
		@param&nbsp;{String}&nbsp;s
		@return&nbsp;{this}
		@example
			//자식노드가&nbsp;모두&nbsp;접혀진&nbsp;채&nbsp;생성하는&nbsp;예제
			oTree.setNodeTemplate(&#39;&lt;li&nbsp;class=&quot;{=sNodeClass}{if&nbsp;bLastNode}&nbsp;{=sLastNodeClass}{/if}&nbsp;{=sCollapsedClass}&quot;&gt;&lt;div{if&nbsp;bHasChild}&nbsp;class=&quot;{=sHasChildClass}&quot;{/if}&gt;&lt;button&nbsp;class=&quot;{=sButtonClass}&quot;&gt;+&lt;/button&gt;&lt;span&nbsp;class=&quot;{=sLabelClass}&quot;&gt;{=sText}&lt;/span&gt;&lt;/div&gt;&lt;/li&gt;&#39;);
	**/
	setNodeTemplate&nbsp;:&nbsp;function(s)&nbsp;{
		this._sTemplate&nbsp;=&nbsp;s;
		return&nbsp;this;
	},
	
	//List&nbsp;관련
	/**
		노드의&nbsp;트리리스트(ul&nbsp;엘리먼트)를&nbsp;가져온다.
		
		@method&nbsp;getChildListOfNode
		@param&nbsp;{HTMLElement}&nbsp;elNode
		@return&nbsp;{HTMLElement}&nbsp;ul&nbsp;엘리먼트
	**/
	getChildListOfNode&nbsp;:&nbsp;function(elNode)&nbsp;{
		return&nbsp;jindo.$$.getSingle(&quot;ul&quot;,&nbsp;elNode);
	},
	
	/**
		트리컴포넌트그&nbsp;최상위&nbsp;루트&nbsp;트리리스트(ul&nbsp;엘리먼트)를&nbsp;가져온다.
		
		@method&nbsp;getRootList
		@return&nbsp;{HTMLElement}
	**/
	getRootList&nbsp;:&nbsp;function()&nbsp;{
		return&nbsp;this._el;
	},
	
	_setRootList&nbsp;:&nbsp;function(el)&nbsp;{
		this._el&nbsp;=&nbsp;el;
	},
	
	//Node&nbsp;관련
	/**
		특정&nbsp;엘리먼트가&nbsp;속해있는&nbsp;노드를&nbsp;구한다.
		
		@method&nbsp;getNode
		@param&nbsp;{HTMLElement}&nbsp;el&nbsp;노드&nbsp;자체,&nbsp;노드의&nbsp;버튼,&nbsp;레이블&nbsp;같이&nbsp;노드의&nbsp;li태그&nbsp;자식&nbsp;엘리먼트로부터&nbsp;노드를&nbsp;구할&nbsp;수&nbsp;있다.&nbsp;&nbsp;
		@return&nbsp;{HTMLElement}&nbsp;노드&nbsp;(LI&nbsp;Element)
	**/
	getNode&nbsp;:&nbsp;function(el)&nbsp;{
		var&nbsp;elNode&nbsp;=&nbsp;jindo.$$.test(el,&nbsp;&#39;.&#39;&nbsp;+&nbsp;this.htClassName.sNode)&nbsp;?&nbsp;el&nbsp;:&nbsp;jindo.$$.getSingle(&#39;!&nbsp;.&#39;&nbsp;+&nbsp;this.htClassName.sNode,&nbsp;el);
		return&nbsp;elNode&nbsp;&amp;&amp;&nbsp;jindo.$Element(elNode).isChildOf(this.getRootList())&nbsp;?&nbsp;elNode&nbsp;:&nbsp;null;
	},
	
	/**
		노드를&nbsp;구성하는&nbsp;요소를&nbsp;구한다.
		
		@method&nbsp;getPartsOfNode
		@param&nbsp;{HTMLElement}&nbsp;elNode
		@return&nbsp;{Object}
		@example
			리턴하는&nbsp;HashTable&nbsp;=&nbsp;{&nbsp;
				elItem&nbsp;:&nbsp;(HTMLElement),&nbsp;
				elChild&nbsp;:&nbsp;(HTMLElement)&nbsp;
			}
	**/
	getPartsOfNode&nbsp;:&nbsp;function(elNode)&nbsp;{
		var&nbsp;aParts&nbsp;=&nbsp;jindo.$$(&#39;&gt;&nbsp;*&#39;,&nbsp;elNode);
		return&nbsp;{&nbsp;elItem&nbsp;:&nbsp;aParts[0],&nbsp;elChild&nbsp;:&nbsp;aParts[1]&nbsp;};
	},
	
	/**
		노드의&nbsp;타입을&nbsp;구한다.
		
		@method&nbsp;getNodeType
		@param&nbsp;{HTMLElement}&nbsp;elNode
		@return&nbsp;{String}&nbsp;&lt;ul&gt;&lt;li&gt;&quot;root&quot;&lt;/li&gt;&lt;li&gt;&quot;internal&quot;&lt;/li&gt;&lt;li&gt;&quot;leaf&quot;&lt;/li&gt;&lt;/ul&gt;
	**/	
	getNodeType&nbsp;:&nbsp;function(elNode)&nbsp;{
		if&nbsp;(elNode&nbsp;===&nbsp;this.getRootNode())&nbsp;{
			return&nbsp;&quot;root&quot;;
		}&nbsp;else&nbsp;if&nbsp;(this.getChildNodes(elNode).length&nbsp;&gt;&nbsp;0)&nbsp;{
			return&nbsp;&quot;internal&quot;;
		}&nbsp;else&nbsp;{
			return&nbsp;&quot;leaf&quot;;
		}
	},
	
	/**
		루트노드를&nbsp;구한다.
		
		@method&nbsp;getRootNode
		@return&nbsp;{HTMLElement}
	**/
	getRootNode&nbsp;:&nbsp;function()&nbsp;{
		if&nbsp;(this._elRootNode)&nbsp;{
			return&nbsp;this._elRootNode;
		}
		this._elRootNode&nbsp;=&nbsp;jindo.$$.getSingle(&#39;.&#39;&nbsp;+&nbsp;this.htClassName.sNode,&nbsp;this.getRootList());
		return&nbsp;this._elRootNode;
	},
	
	/**
		모든&nbsp;노드를&nbsp;가져온다.
		
		@method&nbsp;getAllNodes
		@return&nbsp;{Array}
	**/
	getAllNodes&nbsp;:&nbsp;function()&nbsp;{
		return&nbsp;jindo.$$(&#39;.&#39;&nbsp;+&nbsp;this.htClassName.sNode,&nbsp;this.getRootList());
	},
	
	/**
		자식&nbsp;노드들을&nbsp;가져온다.
		
		@method&nbsp;getChildNodes
		@param&nbsp;{HTMLElement}&nbsp;elNode&nbsp;노드
		@return&nbsp;{Array}&nbsp;자식&nbsp;노드들의&nbsp;배열
	**/
	getChildNodes&nbsp;:&nbsp;function(elNode)&nbsp;{
		var&nbsp;elChildList&nbsp;=&nbsp;this.getChildListOfNode(elNode);
		return&nbsp;elChildList&nbsp;?&nbsp;jindo.$$(&#39;&gt;&nbsp;.&#39;&nbsp;+&nbsp;this.htClassName.sNode,&nbsp;elChildList)&nbsp;:&nbsp;[];
	},
	
	/**
		노드가&nbsp;자식을&nbsp;가지고&nbsp;있는지&nbsp;여부를&nbsp;가져온다.
		
		@method&nbsp;hasChild
		@param&nbsp;{HTMLElement}&nbsp;elNode&nbsp;노드
		@return&nbsp;{Boolean}
	**/
	hasChild&nbsp;:&nbsp;function(elNode)&nbsp;{
		var&nbsp;htPart&nbsp;=&nbsp;this.getPartsOfNode(elNode);
		return&nbsp;htPart.elChild&nbsp;&amp;&amp;&nbsp;htPart.elChild.getElementsByTagName(&#39;li&#39;)[0]&nbsp;?&nbsp;true&nbsp;:&nbsp;false;
	},
	
	/**
		부모&nbsp;노드를&nbsp;가져온다.
		
		@method&nbsp;getParentNode
		@param&nbsp;{HTMLElement}&nbsp;elNode&nbsp;노드
		@return&nbsp;{HTMLElement}&nbsp;부모&nbsp;노드
	**/
	getParentNode&nbsp;:&nbsp;function(elNode)&nbsp;{
		var&nbsp;elRootNode&nbsp;=&nbsp;this.getRootNode();
		if&nbsp;(elNode&nbsp;===&nbsp;elRootNode)&nbsp;{
			return&nbsp;null;
		}
		return&nbsp;this.getNode(elNode.parentNode);
	},
	
	/**
		이전&nbsp;노드를&nbsp;가져온다.
		
		@method&nbsp;getPreviousNode
		@param&nbsp;{HTMLElement}&nbsp;elNode&nbsp;노드
		@return&nbsp;{HTMLElement}&nbsp;이전&nbsp;노드
	**/
	getPreviousNode&nbsp;:&nbsp;function(elNode)&nbsp;{
		var&nbsp;elReturn&nbsp;=&nbsp;jindo.$$.getSingle(&#39;!~&nbsp;.&#39;&nbsp;+&nbsp;this.htClassName.sNode,&nbsp;elNode);
		return&nbsp;elReturn&nbsp;?&nbsp;this.getNode(elReturn)&nbsp;:&nbsp;null;
	},
	
	/**
		다음&nbsp;노드를&nbsp;가져온다.
		
		@method&nbsp;getNextNode
		@param&nbsp;{HTMLElement}&nbsp;elNode&nbsp;노드
		@return&nbsp;{HTMLElement}&nbsp;다음&nbsp;노드
	**/
	getNextNode&nbsp;:&nbsp;function(elNode)&nbsp;{
		var&nbsp;elReturn&nbsp;=&nbsp;jindo.$$.getSingle(&#39;~&nbsp;.&#39;&nbsp;+&nbsp;this.htClassName.sNode,&nbsp;elNode);
		return&nbsp;elReturn&nbsp;?&nbsp;this.getNode(elReturn)&nbsp;:&nbsp;null;
	},
	
	/**
		선택된&nbsp;엘리먼트를&nbsp;가져온다.
		
		@method&nbsp;getSelectedNode
		@return&nbsp;{HTMLElement}
	**/
	getSelectedNode&nbsp;:&nbsp;function()&nbsp;{
		return&nbsp;this._elSelectedNode;
	},
	
	_setSelectedNode&nbsp;:&nbsp;function(el)&nbsp;{
		this._elSelectedNode&nbsp;=&nbsp;el;
	},
	
	/**
		노드가&nbsp;접혀있는지&nbsp;여부를&nbsp;구함
		
		@method&nbsp;isCollapsed
		@param&nbsp;{HTMLElement}&nbsp;elNode
		@return&nbsp;{Boolean}&nbsp;노드가&nbsp;접혀있는지&nbsp;여부
	**/
	isCollapsed&nbsp;:&nbsp;function(elNode)&nbsp;{
		return&nbsp;jindo.$Element(elNode).hasClass(this.htClassName.sCollapsed);
	},
	
	/**
		노드의&nbsp;depth를&nbsp;구한다.
		
		@method&nbsp;getNodeDepth
		@param&nbsp;{HTMLElement}&nbsp;elNode
		@return&nbsp;{Number}&nbsp;노드의&nbsp;depth&nbsp;
	**/
	getNodeDepth&nbsp;:&nbsp;function(elNode)&nbsp;{
		var&nbsp;nDepth&nbsp;=&nbsp;-1;
		
		for&nbsp;(;&nbsp;elNode;&nbsp;elNode&nbsp;=&nbsp;elNode.parentNode)&nbsp;{
			if&nbsp;(elNode&nbsp;==&nbsp;this.getRootList())&nbsp;{
				break;
			}
			if&nbsp;(jindo.$$.test(elNode,&nbsp;&#39;.&#39;&nbsp;+&nbsp;this.htClassName.sNode))&nbsp;{
				nDepth++;
			}
		}
		
		return&nbsp;nDepth;
	},
	
	/**
		노드에&nbsp;Data를&nbsp;설정한다.
		
		@method&nbsp;setNodeData
		@param&nbsp;{HTMLElement}&nbsp;elNode
		@return&nbsp;{this}
		@example
			oTree.setNodeData(elNode,&nbsp;{
				nType&nbsp;:&nbsp;1,
				nDepth&nbsp;:&nbsp;3
			});
			
			oTree.getNodeData(elNode);
			--&gt;&nbsp;&nbsp;
			{
				bLabel&nbsp;:&nbsp;(String)&nbsp;노드의&nbsp;레이블&nbsp;텍스트명,
				_aChildren&nbsp;:&nbsp;(Array)&nbsp;자식노드데이터의&nbsp;배열
				nType&nbsp;:&nbsp;1,
				nDepth&nbsp;:&nbsp;3,
			}
	**/
	setNodeData&nbsp;:&nbsp;function(elNode,&nbsp;htNodeData)&nbsp;{
		var&nbsp;sKey&nbsp;=&nbsp;this._getNodeDataKey(elNode);
		delete&nbsp;htNodeData[&quot;_aChildren&quot;];&nbsp;//고정&nbsp;정보는&nbsp;설정할&nbsp;수&nbsp;없도록&nbsp;
		delete&nbsp;htNodeData[&quot;sLabel&quot;];&nbsp;//label은&nbsp;setNodeLabel&nbsp;메서드로&nbsp;설정가능
		for&nbsp;(var&nbsp;vProp&nbsp;in&nbsp;htNodeData)&nbsp;{
			this._htNodeData[sKey][vProp]&nbsp;=&nbsp;htNodeData[vProp];	
		}
		return&nbsp;this;
	},
	
	/**
		노드의&nbsp;label에&nbsp;해당하는&nbsp;엘리먼트를&nbsp;가져온다.
		
		@method&nbsp;getNodeLabelElement
		@param&nbsp;{HTMLElement}&nbsp;elNode
		@return&nbsp;{HTMLElement}&nbsp;클래스명&nbsp;&quot;label&quot;을&nbsp;가지는&nbsp;엘리먼트
	**/
	getNodeLabelElement&nbsp;:&nbsp;function(elNode)&nbsp;{
		return&nbsp;jindo.$$.getSingle(&quot;.&quot;&nbsp;+&nbsp;this.htClassName.sLabel,&nbsp;elNode);
	},
	
	/**
		노드의&nbsp;label을&nbsp;가져온다.
		
		@method&nbsp;getNodeLabel
		@param&nbsp;{HTMLElement}&nbsp;elNode
		@return&nbsp;{String}&nbsp;label의&nbsp;innerHTML
	**/
	getNodeLabel&nbsp;:&nbsp;function(elNode)&nbsp;{
		return&nbsp;jindo.$Element(this.getNodeLabelElement(elNode)).html();
	},
	
	/**
		노드의&nbsp;label을&nbsp;변경한다.
		
		@method&nbsp;setNodeLabel
		@param&nbsp;{HTMLElement}&nbsp;elNode
		@param&nbsp;{String}&nbsp;sLabel&nbsp;label의&nbsp;innerHTML
		@return&nbsp;{this}
	**/
	setNodeLabel&nbsp;:&nbsp;function(elNode,&nbsp;sLabel)&nbsp;{
		var&nbsp;sKey&nbsp;=&nbsp;this._getNodeDataKey(elNode);
		this._htNodeData[sKey][&quot;sLabel&quot;]&nbsp;=&nbsp;sLabel;
		jindo.$Element(this.getNodeLabelElement(elNode)).html(sLabel);
		return&nbsp;this;	
	},
	
	/**
		모든&nbsp;노드에&nbsp;키를&nbsp;생성하여&nbsp;설정한다.
		@ignore
	**/
	_makeNodeDataKeyFromHTML&nbsp;:&nbsp;function()&nbsp;{
		var&nbsp;aNodes&nbsp;=&nbsp;this.getAllNodes();
		
		//루프
		for&nbsp;(var&nbsp;i&nbsp;=&nbsp;0;&nbsp;i&nbsp;&lt;&nbsp;aNodes.length;&nbsp;i++)&nbsp;{
			var&nbsp;elNode&nbsp;=&nbsp;aNodes[i];
			this._makeNodeDataKey(elNode);
			this._makeNodeData(elNode);
		}
	},
	
	/**
		노드의&nbsp;data를&nbsp;가져오기위한&nbsp;키를&nbsp;생성하여&nbsp;설정한다.
		@ignore
		@param&nbsp;{HTMLElement}&nbsp;elNode
	**/
	_makeNodeDataKey&nbsp;:&nbsp;function(elNode)&nbsp;{
		var&nbsp;welNode&nbsp;=&nbsp;jindo.$Element(elNode);
		var&nbsp;sNodeDataKey&nbsp;=&nbsp;this._getNodeDataKey(elNode);
		if&nbsp;(sNodeDataKey)&nbsp;{
			return&nbsp;false;
		}
		
		var&nbsp;sPrefix&nbsp;=&nbsp;this.option(&#39;sClassPrefix&#39;);
		var&nbsp;sUnique&nbsp;=&nbsp;(&#39;data-&#39;&nbsp;+&nbsp;new&nbsp;Date().getTime()&nbsp;+&nbsp;parseInt(Math.random()&nbsp;*&nbsp;10000000,&nbsp;10)).toString();&nbsp;//ie8&nbsp;버그수정.&nbsp;toString&nbsp;이&nbsp;없으면&nbsp;나중에&nbsp;sUnique&nbsp;값이&nbsp;바뀜
		var&nbsp;sUniqueClass&nbsp;=&nbsp;sPrefix&nbsp;+&nbsp;sUnique;
		welNode.addClass(sUniqueClass);
		
		var&nbsp;sKey&nbsp;=&nbsp;this._getNodeDataKey(elNode);
		this._htNodeData[sKey]&nbsp;=&nbsp;{};&nbsp;//Data&nbsp;Object&nbsp;초기화
		
		return&nbsp;sKey;		
	},
	
	/**
		노드의&nbsp;기본&nbsp;data를&nbsp;설정한다.
		@param&nbsp;{HTMLElement}&nbsp;elNode
	**/
	_makeNodeData&nbsp;:&nbsp;function(elNode)&nbsp;{
		var&nbsp;htNodeData&nbsp;=&nbsp;this.getNodeData(elNode);
		htNodeData[&quot;element&quot;]&nbsp;=&nbsp;elNode;
		htNodeData[&quot;sLabel&quot;]&nbsp;=&nbsp;jindo.$Element(this.getNodeLabelElement(elNode)).text();
		htNodeData[&quot;bLastNode&quot;]&nbsp;=&nbsp;jindo.$$.getSingle(&#39;~&nbsp;.&#39;&nbsp;+&nbsp;this.htClassName.sNode,&nbsp;elNode)&nbsp;?&nbsp;false&nbsp;:&nbsp;true;
	},
	
	/**
		노드의&nbsp;data를&nbsp;가져오기위한&nbsp;키를&nbsp;구한다.
		@ignore
		@param&nbsp;{HTMLElement}&nbsp;elNode
	**/
	_getNodeDataKey&nbsp;:&nbsp;function(elNode)&nbsp;{
		var&nbsp;sClassName&nbsp;=&nbsp;elNode.className;
		var&nbsp;sPrefix&nbsp;=&nbsp;this.option(&#39;sClassPrefix&#39;);
		
		var&nbsp;rKey&nbsp;=&nbsp;new&nbsp;RegExp(&#39;(&#39;+&nbsp;sPrefix&nbsp;+&nbsp;&#39;data-[0-9]+)&#39;);
		if&nbsp;(rKey.test(sClassName))&nbsp;{
			return&nbsp;RegExp.$1;
		}
		
		return&nbsp;null;
	},
	
	/**
		노드에&nbsp;설정된&nbsp;data를&nbsp;구한다.
		
		@method&nbsp;getNodeData
		@param&nbsp;{HTMLElement}&nbsp;elNode&nbsp;생략될&nbsp;경우&nbsp;전체&nbsp;데이터셋을&nbsp;리턴한다.
		@return&nbsp;{Object}&nbsp;노드의&nbsp;data
		@example&nbsp;
			//&nbsp;노드&nbsp;data의&nbsp;기본&nbsp;구조
			{&nbsp;
				sLabel&nbsp;:&nbsp;(String)&nbsp;노드명,&nbsp;
				_aChildren&nbsp;:&nbsp;(Array)&nbsp;자식노드&nbsp;배열&nbsp;
			}
	**/
	getNodeData&nbsp;:&nbsp;function(elNode)&nbsp;{
		return&nbsp;(elNode)&nbsp;?&nbsp;this._htNodeData[this._getNodeDataKey(elNode)]&nbsp;:&nbsp;this._htNodeData;
	},
	
	/**
		노드의&nbsp;데이터를&nbsp;제거한다.
		부모의&nbsp;children에서도&nbsp;제거한다.
		@param&nbsp;{HTMLElement}&nbsp;elNode
	**/
	_clearNodeData&nbsp;:&nbsp;function(elNode)&nbsp;{
		//todo
		var&nbsp;elParentNode&nbsp;=&nbsp;this.getParentNode(elNode);
		var&nbsp;htNodeData&nbsp;=&nbsp;this.getNodeData(elNode);
		var&nbsp;sKey&nbsp;=&nbsp;this._getNodeDataKey(elNode);
		
		if&nbsp;(elParentNode)&nbsp;{
			var&nbsp;htParentNodeData&nbsp;=&nbsp;this.getNodeData(elParentNode);
			if(htParentNodeData)&nbsp;{
				var&nbsp;nIndex&nbsp;=&nbsp;jindo.$A(htParentNodeData[&quot;_aChildren&quot;]).indexOf(htNodeData);
				if(nIndex&nbsp;&gt;&nbsp;-1){
&nbsp;&nbsp;&nbsp;&nbsp;				htParentNodeData[&quot;_aChildren&quot;].splice(nIndex,&nbsp;1);	
				}
			}
		}

		//자식의&nbsp;모든&nbsp;노드&nbsp;데이터도&nbsp;재귀로&nbsp;제거한다.
		var&nbsp;self&nbsp;=&nbsp;this;
		if&nbsp;(this.hasChild(elNode))&nbsp;{
			jindo.$A(this.getChildNodes(elNode)).forEach(function(elNode){
				self._clearNodeData(elNode);
			});
		}

		delete&nbsp;this._htNodeData[sKey];
	},
	
	/**
		노드를&nbsp;펼친다.
		
		@method&nbsp;expandNode
		@param&nbsp;{HTMLElement}&nbsp;elNode&nbsp;펼칠&nbsp;노드
		@param&nbsp;{Boolean}&nbsp;bChildAll&nbsp;노드의&nbsp;자식도&nbsp;모두&nbsp;펼칠지&nbsp;여부
		@return&nbsp;{this}
	**/
	expandNode&nbsp;:&nbsp;function(elNode,&nbsp;bChildAll)&nbsp;{
		/**
			노드가&nbsp;펼쳐지기&nbsp;전
			
			@event&nbsp;beforeExpand
			@param&nbsp;{String}&nbsp;sType&nbsp;커스텀&nbsp;이벤트명
			@param&nbsp;{HTMLElement}&nbsp;element&nbsp;펼쳐질&nbsp;노드
			@param&nbsp;{Function}&nbsp;stop&nbsp;수행시&nbsp;노드를&nbsp;자식노드를&nbsp;펼치지&nbsp;않음
			@example
				//&nbsp;커스텀&nbsp;이벤트&nbsp;핸들링&nbsp;예제
				oTree.attach(&quot;beforeExpand&quot;,&nbsp;function(oCustomEvent)&nbsp;{&nbsp;...&nbsp;});
		**/
		if&nbsp;(!this.fireEvent(&#39;beforeExpand&#39;,&nbsp;{&nbsp;element&nbsp;:&nbsp;elNode&nbsp;}))&nbsp;{
			return;
		}
		
		var&nbsp;htPart&nbsp;=&nbsp;this.getPartsOfNode(elNode);
		var&nbsp;aChildren&nbsp;=&nbsp;[];

		if&nbsp;(jindo.$$.test(htPart.elItem,&nbsp;&#39;.&#39;&nbsp;+&nbsp;this.htClassName.sHasChild))&nbsp;{
			aChildren.push(elNode);
		}
		
		if&nbsp;(bChildAll)&nbsp;{
			aChildren&nbsp;=&nbsp;aChildren.concat(jindo.$$(&#39;.&#39;&nbsp;+&nbsp;this.htClassName.sHasChild,&nbsp;elNode));
		}

		for&nbsp;(var&nbsp;i&nbsp;=&nbsp;0,&nbsp;elChild;&nbsp;(elChild&nbsp;=&nbsp;aChildren[i]);&nbsp;i++)&nbsp;{
			var&nbsp;elChildNode&nbsp;=&nbsp;this.getNode(elChild);
			jindo.$Element(elChildNode).removeClass(this.htClassName.sCollapsed);
			/**
				노드가&nbsp;펼쳐진&nbsp;후
				
				@event&nbsp;expand
				@param&nbsp;{String}&nbsp;sType&nbsp;커스텀&nbsp;이벤트명
				@param&nbsp;{HTMLElement}&nbsp;element&nbsp;펼쳐진&nbsp;노드
				@example
					//&nbsp;커스텀&nbsp;이벤트&nbsp;핸들링&nbsp;예제
					oTree.attach(&quot;expand&quot;,&nbsp;function(oCustomEvent)&nbsp;{&nbsp;...&nbsp;});
			**/
			this.fireEvent(&#39;expand&#39;,&nbsp;{&nbsp;element&nbsp;:&nbsp;elChildNode&nbsp;});
		}
		
		return&nbsp;this;
	},
	
	/**
		노드를&nbsp;접는다.
		
		@method&nbsp;collapseNode
		@param&nbsp;{HTMLElement}&nbsp;elNode&nbsp;접을&nbsp;노드
		@param&nbsp;{Boolean}&nbsp;bChildAll&nbsp;노드의&nbsp;자식도&nbsp;모두&nbsp;펼칠지&nbsp;여부
		@return&nbsp;{this}
	**/
	collapseNode&nbsp;:&nbsp;function(elNode,&nbsp;bChildAll)&nbsp;{
		/**
			노드가&nbsp;접혀지기&nbsp;전
			
			@event&nbsp;beforeCollapse
			@param&nbsp;{String}&nbsp;sType&nbsp;커스텀&nbsp;이벤트명
			@param&nbsp;{HTMLElement}&nbsp;element&nbsp;접혀질&nbsp;노드
			@param&nbsp;{Function}&nbsp;stop&nbsp;수행시&nbsp;노드를&nbsp;자식노드를&nbsp;접지&nbsp;않음
			@example
				//&nbsp;커스텀&nbsp;이벤트&nbsp;핸들링&nbsp;예제
				oTree.attach(&quot;beforeCollapse&quot;,&nbsp;function(oCustomEvent)&nbsp;{&nbsp;...&nbsp;});
		**/
		if&nbsp;(!this.fireEvent(&#39;beforeCollapse&#39;,&nbsp;{&nbsp;element&nbsp;:&nbsp;elNode&nbsp;}))&nbsp;{
			return;
		}
		
		var&nbsp;htPart&nbsp;=&nbsp;this.getPartsOfNode(elNode);
		var&nbsp;aChildren&nbsp;=&nbsp;[];
		
		if&nbsp;(jindo.$$.test(htPart.elItem,&nbsp;&#39;.&#39;&nbsp;+&nbsp;this.htClassName.sHasChild))&nbsp;{
			aChildren.push(elNode);
		}
		
		if&nbsp;(bChildAll)&nbsp;{
			aChildren&nbsp;=&nbsp;aChildren.concat(jindo.$$(&#39;.&#39;&nbsp;+&nbsp;this.htClassName.sHasChild,&nbsp;elNode));
		}
		
		for&nbsp;(var&nbsp;i&nbsp;=&nbsp;0,&nbsp;elChild;&nbsp;(elChild&nbsp;=&nbsp;aChildren[i]);&nbsp;i++)&nbsp;{
			var&nbsp;elChildNode&nbsp;=&nbsp;this.getNode(elChild);
			jindo.$Element(elChildNode).addClass(this.htClassName.sCollapsed);
			/**
				노드가&nbsp;접혀진&nbsp;후
				
				@event&nbsp;collapse
				@param&nbsp;{String}&nbsp;sType&nbsp;커스텀&nbsp;이벤트명
				@param&nbsp;{HTMLElement}&nbsp;element&nbsp;접혀진&nbsp;노드
				@example
					//&nbsp;커스텀&nbsp;이벤트&nbsp;핸들링&nbsp;예제
					oTree.attach(&quot;collapse&quot;,&nbsp;function(oCustomEvent)&nbsp;{&nbsp;...&nbsp;});
			**/
			this.fireEvent(&#39;collapse&#39;,&nbsp;{&nbsp;element&nbsp;:&nbsp;elChildNode&nbsp;});
		}
		
		return&nbsp;this;
	},
	
	/**
		노드를&nbsp;선택한다.
		
		@method&nbsp;selectNode
		@param&nbsp;{HTMLElement}&nbsp;elNode&nbsp;선택할&nbsp;노드
		@return&nbsp;{Boolean}&nbsp;선택여부
	**/
	selectNode&nbsp;:&nbsp;function(elNode)&nbsp;{
		var&nbsp;htPart&nbsp;=&nbsp;this.getPartsOfNode(elNode);
		var&nbsp;elSelectedNode&nbsp;=&nbsp;this.getSelectedNode();
		
		var&nbsp;elItem&nbsp;=&nbsp;htPart.elItem;
		
		/**
			노드가&nbsp;선택되기&nbsp;전
			
			@event&nbsp;beforeSelect
			@param&nbsp;{String}&nbsp;sType&nbsp;커스텀&nbsp;이벤트명
			@param&nbsp;{HTMLElement}&nbsp;element&nbsp;선택될&nbsp;노드
			@param&nbsp;{Function}&nbsp;stop&nbsp;수행시&nbsp;노드를&nbsp;선택하지&nbsp;않음
			@example
				//&nbsp;커스텀&nbsp;이벤트&nbsp;핸들링&nbsp;예제
				oTree.attach(&quot;beforeSelect&quot;,&nbsp;function(oCustomEvent)&nbsp;{&nbsp;...&nbsp;});
		**/
		if&nbsp;(!this.fireEvent(&#39;beforeSelect&#39;,&nbsp;{&nbsp;element&nbsp;:&nbsp;elNode&nbsp;}))&nbsp;{
			return&nbsp;false;
		}
		
		if&nbsp;(elSelectedNode&nbsp;!=&nbsp;elNode)&nbsp;{
			this.deselectNode();
			jindo.$Element(elItem).addClass(this.htClassName.sSelected);
			
			this._setSelectedNode(elNode);
		}&nbsp;
		
		/**
			노드가&nbsp;선택되었을&nbsp;때
			
			@event&nbsp;select
			@param&nbsp;{String}&nbsp;sType&nbsp;커스텀&nbsp;이벤트명
			@param&nbsp;{HTMLElement}&nbsp;element&nbsp;선택된&nbsp;노드
			@example
				//&nbsp;커스텀&nbsp;이벤트&nbsp;핸들링&nbsp;예제
				oTree.attach(&quot;select&quot;,&nbsp;function(oCustomEvent)&nbsp;{&nbsp;...&nbsp;});
		**/
		this.fireEvent(&#39;select&#39;,&nbsp;{&nbsp;element&nbsp;:&nbsp;elNode&nbsp;});
		if&nbsp;(this.option(&quot;bExpandOnSelect&quot;)&nbsp;&amp;&amp;&nbsp;elSelectedNode&nbsp;!=&nbsp;elNode&nbsp;&amp;&amp;&nbsp;this.isCollapsed(elNode))&nbsp;{
			var&nbsp;self&nbsp;=&nbsp;this;
			this._bExpandOnSelect&nbsp;=&nbsp;true;
			setTimeout(function(){
				self._bExpandOnSelect&nbsp;=&nbsp;false;
			},&nbsp;500);
			this.expandNode(elNode);
		}&nbsp;
		return&nbsp;true;
	},
	
	/**
		선택된&nbsp;노드를&nbsp;선택해제한다.
		
		@method&nbsp;deselectNode
		@return&nbsp;{this}
	**/
	deselectNode&nbsp;:&nbsp;function()&nbsp;{
		var&nbsp;elSelectedNode&nbsp;=&nbsp;this.getSelectedNode();
		if&nbsp;(elSelectedNode)&nbsp;{
			jindo.$Element(this.getPartsOfNode(elSelectedNode).elItem).removeClass(this.htClassName.sSelected);
		}
		this._setSelectedNode(null);
		return&nbsp;this;
	},
	
	_createChild&nbsp;:&nbsp;function(elNode)&nbsp;{
		var&nbsp;elChild&nbsp;=&nbsp;this.getChildListOfNode(elNode);
		if&nbsp;(!elChild)&nbsp;{
			elChild&nbsp;=&nbsp;jindo.$(&#39;&lt;ul&gt;&#39;);
			elNode.appendChild(elChild);
		}

		try&nbsp;{
			return&nbsp;elChild;
		}&nbsp;finally&nbsp;{
			elChild&nbsp;=&nbsp;null;
		}
	},
	
	/**
		노드를&nbsp;삭제한다.
		
		@method&nbsp;removeNode
		@param&nbsp;{HTMLElement}&nbsp;elNode&nbsp;삭제할&nbsp;노드
		@return&nbsp;{this}
	**/
	removeNode&nbsp;:&nbsp;function(elNode)&nbsp;{
		//루트노드틑&nbsp;삭제할&nbsp;수&nbsp;없음
		if&nbsp;(!elNode&nbsp;||&nbsp;elNode&nbsp;===&nbsp;this.getRootNode())&nbsp;{
			this.clearNode(elNode);
			return&nbsp;this;
		}

		var&nbsp;htNodeData&nbsp;=&nbsp;this.getNodeData(elNode);
		var&nbsp;elPreviousNode&nbsp;=&nbsp;htNodeData.bLastNode&nbsp;?&nbsp;this.getPreviousNode(elNode)&nbsp;:&nbsp;null;
		
		var&nbsp;bLastNode&nbsp;=&nbsp;elNode.parentNode.childNodes.length&nbsp;==&nbsp;1;&nbsp;
		
		var&nbsp;elParentNode&nbsp;=&nbsp;this.getParentNode(elNode);
		this._clearNodeData(elNode);
		elNode.parentNode.removeChild(elNode);
		
		this.selectNode(elParentNode);
		
		//&nbsp;형제중에서&nbsp;마지막&nbsp;노드가&nbsp;삭제되는&nbsp;경우&nbsp;앞의&nbsp;노드가&nbsp;마지막&nbsp;노드가&nbsp;되어야&nbsp;하므로&nbsp;paint
		this._paintNode(elPreviousNode);
		
		if&nbsp;(bLastNode)&nbsp;{
			var&nbsp;htParentNodeData&nbsp;=&nbsp;this.getNodeData(elParentNode);
			htParentNodeData.bHasChild&nbsp;=&nbsp;false;
		}
		
		//&nbsp;부모노드&nbsp;paint
		this._paintNode(elParentNode);
		return&nbsp;this;
	},
	
	/**
		자식&nbsp;노드를&nbsp;모두&nbsp;삭제한다.
		
		@method&nbsp;clearNode
		@param&nbsp;{HTMLElement}&nbsp;elNode&nbsp;삭제할&nbsp;노드들의&nbsp;부모노드
		@return&nbsp;{Boolean}&nbsp;삭제여부
	**/
	clearNode&nbsp;:&nbsp;function(elNode)&nbsp;{
		var&nbsp;elChild&nbsp;=&nbsp;this.getChildListOfNode(elNode);
		if&nbsp;(elChild)&nbsp;{
			var&nbsp;aChildLi&nbsp;=&nbsp;elChild.getElementsByTagName(&#39;li&#39;);
			for&nbsp;(var&nbsp;i&nbsp;=&nbsp;0,&nbsp;elChildLi;&nbsp;(elChildLi&nbsp;=&nbsp;aChildLi[i]);&nbsp;i++)&nbsp;{
				this._clearNodeData(elChildLi);
			}
			
			elChild.parentNode.removeChild(elChild);
			
			var&nbsp;htNodeData&nbsp;=&nbsp;this.getNodeData(elNode);
			htNodeData.bHasChild&nbsp;=&nbsp;false;
			
			this._paintNode(elNode);
			return&nbsp;true;
		}&nbsp;
		return&nbsp;false;
	},
	
	/**
		루트를&nbsp;제외한&nbsp;모든&nbsp;노드를&nbsp;제거한다.
		
		@method&nbsp;clearTree
		@return&nbsp;{this}&nbsp;
	**/
	clearTree&nbsp;:&nbsp;function()&nbsp;{
		this.clearNode(this.getRootNode());
		return&nbsp;this;
	},
	
	_moveNodes&nbsp;:&nbsp;function(elTargetNode,&nbsp;aNodes,&nbsp;fCallback)&nbsp;{
		for&nbsp;(var&nbsp;i&nbsp;=&nbsp;0,&nbsp;elNode;&nbsp;(elNode&nbsp;=&nbsp;aNodes[i]);&nbsp;i++)&nbsp;{
			fCallback(elNode);
		}
	},
	
	/**
		특정&nbsp;노드에&nbsp;새&nbsp;자식노드를&nbsp;삽입한다.
		
		@method&nbsp;appendNode
		@param&nbsp;{HTMLElement}&nbsp;elTargetNode&nbsp;삽입할&nbsp;노드의&nbsp;부모가&nbsp;될&nbsp;노드
		@param&nbsp;{Array}&nbsp;aNodes&nbsp;삽입할&nbsp;노드의&nbsp;배열
		@return&nbsp;{this}
	**/
	appendNode&nbsp;:&nbsp;function(elTargetNode,&nbsp;aNodes)&nbsp;{
		if&nbsp;(!(aNodes&nbsp;instanceof&nbsp;Array))&nbsp;{
			return&nbsp;arguments.callee.call(this,&nbsp;elTargetNode,&nbsp;[aNodes]);
		}
		
		var&nbsp;self&nbsp;=&nbsp;this;
		var&nbsp;elChild&nbsp;=&nbsp;this._createChild(elTargetNode);
		this._moveNodes(elTargetNode,&nbsp;aNodes,&nbsp;function(elNode)&nbsp;{
			var&nbsp;elParentNode&nbsp;=&nbsp;null;
			elParentNode&nbsp;=&nbsp;self.getParentNode(elNode);
			
			elChild.appendChild(elNode);
			
			//원래의&nbsp;부모와&nbsp;그&nbsp;부모의&nbsp;자식
			if&nbsp;(elParentNode)&nbsp;{
				self.paintNode(elParentNode,&nbsp;false);
				jindo.$A(self.getChildNodes(elParentNode)).forEach(function(elChildNode){
					self.paintNode(elChildNode,&nbsp;false);	
				});
			}
		});
		
		//타겟
		this.paintNode(elTargetNode,&nbsp;false);
		
		//타겟의&nbsp;자식&nbsp;(자기&nbsp;자신과&nbsp;자신의&nbsp;형제)
		jindo.$A(this.getChildNodes(elTargetNode)).forEach(function(elChildNode){
			self.paintNode(elChildNode,&nbsp;false);	
		});
		
		return&nbsp;this;
	},
	
	/**
		특정&nbsp;노드&nbsp;앞&nbsp;새&nbsp;노드를&nbsp;삽입한다.
		
		@method&nbsp;insertNodeBefore
		@param&nbsp;{HTMLElement}&nbsp;elTargetNode&nbsp;기준&nbsp;노드&nbsp;(루트노드가&nbsp;될&nbsp;수&nbsp;없다)
		@param&nbsp;{Array}&nbsp;aNodes&nbsp;삽입할&nbsp;노드의&nbsp;배열
		@return&nbsp;{this}
	**/
	insertNodeBefore&nbsp;:&nbsp;function(elTargetNode,&nbsp;aNodes)&nbsp;{
		if(elTargetNode&nbsp;==&nbsp;this.getRootNode())&nbsp;{
			return;
		}
		
		if&nbsp;(!(aNodes&nbsp;instanceof&nbsp;Array))&nbsp;{
			return&nbsp;arguments.callee.call(this,&nbsp;elTargetNode,&nbsp;[&nbsp;aNodes&nbsp;]);
		}

		var&nbsp;self&nbsp;=&nbsp;this;
		var&nbsp;elChildList&nbsp;=&nbsp;elTargetNode.parentNode;
		this._moveNodes(elTargetNode,&nbsp;aNodes,&nbsp;function(elNode)&nbsp;{
			
			var&nbsp;elParentNode&nbsp;=&nbsp;null;
			elParentNode&nbsp;=&nbsp;self.getNode(elChildList);
			
			elChildList.insertBefore(elNode,&nbsp;elTargetNode);
			
			//그&nbsp;부모의&nbsp;자식
			if&nbsp;(elParentNode)&nbsp;{
				jindo.$A(self.getChildNodes(elParentNode)).forEach(function(elChildNode){
					self.paintNode(elChildNode,&nbsp;false);	
				});
			}
		});
		
		return&nbsp;this;
	},
	
	/**
		특정&nbsp;노드&nbsp;다음에&nbsp;새&nbsp;노드를&nbsp;삽입힌다.
		
		@method&nbsp;insertNodeAfter
		@param&nbsp;{HTMLElement}&nbsp;elTargetNode&nbsp;기준&nbsp;노드&nbsp;(루트노드가&nbsp;될&nbsp;수&nbsp;없다)
		@param&nbsp;{Array}&nbsp;aNodes&nbsp;삽입할&nbsp;노드의&nbsp;배열
		@return&nbsp;{this}
	**/
	insertNodeAfter&nbsp;:&nbsp;function(elTargetNode,&nbsp;aNodes)&nbsp;{
		if(elTargetNode&nbsp;==&nbsp;this.getRootNode())&nbsp;{
			return;
		}
		
		if&nbsp;(!(aNodes&nbsp;instanceof&nbsp;Array))&nbsp;{
			return&nbsp;arguments.callee.call(this,&nbsp;elTargetNode,&nbsp;[&nbsp;aNodes&nbsp;]);
		}
		
		var&nbsp;self&nbsp;=&nbsp;this;
		var&nbsp;elChildList&nbsp;=&nbsp;elTargetNode.parentNode;
		var&nbsp;elNextNode&nbsp;=&nbsp;elTargetNode;
		this._moveNodes(elTargetNode,&nbsp;aNodes,&nbsp;function(elNode)&nbsp;{
			
			var&nbsp;elParentNode&nbsp;=&nbsp;null;
			elParentNode&nbsp;=&nbsp;self.getNode(elChildList);
			&nbsp;
			elChildList.insertBefore(elNode,&nbsp;elNextNode.nextSibling);&nbsp;
			elNextNode&nbsp;=&nbsp;elNode;
			
			//그&nbsp;부모의&nbsp;자식
			if&nbsp;(elParentNode)&nbsp;{
				jindo.$A(self.getChildNodes(elParentNode)).forEach(function(elChildNode){
					self.paintNode(elChildNode,&nbsp;false);	
				});
			}
		});
		
		return&nbsp;this;
	},
	
	_getCode&nbsp;:&nbsp;function(aData)&nbsp;{
		if&nbsp;(aData&nbsp;instanceof&nbsp;Array)&nbsp;{
			var&nbsp;aCodes&nbsp;=&nbsp;[];
			var&nbsp;sTemplate&nbsp;=&nbsp;this.getNodeTemplate();
		
			for&nbsp;(var&nbsp;i&nbsp;=&nbsp;0;&nbsp;i&nbsp;&lt;&nbsp;aData.length;&nbsp;i++)&nbsp;{
				var&nbsp;htData&nbsp;=&nbsp;aData[i];
				var&nbsp;htParam&nbsp;=&nbsp;{&nbsp;sTemplate&nbsp;:&nbsp;sTemplate,&nbsp;htData&nbsp;:&nbsp;htData&nbsp;};
				/**
					노드를&nbsp;생성할&nbsp;때&nbsp;(createNode)&nbsp;발생
					
					@event&nbsp;beforeProcessData
					@param&nbsp;{String}&nbsp;sType&nbsp;커스텀&nbsp;이벤트명
					@param&nbsp;{String}&nbsp;sTemplate&nbsp;노드의&nbsp;템플릿문자열
					@param&nbsp;{Object}&nbsp;htData&nbsp;처리중인&nbsp;데이터&nbsp;객체
					@example
						//&nbsp;커스텀&nbsp;이벤트&nbsp;핸들링&nbsp;예제
						oTree.attach(&quot;beforeProcessData&quot;,&nbsp;function(oCustomEvent)&nbsp;{
						
							//&nbsp;sNodeClass&nbsp;:&nbsp;노드&nbsp;클래스명
							//&nbsp;bLastNode&nbsp;:&nbsp;마지막&nbsp;노드인지&nbsp;여부
							//&nbsp;sLastNodeClass&nbsp;:&nbsp;마지막&nbsp;노드임을&nbsp;나타내는&nbsp;클래스명
							//&nbsp;bHasChild&nbsp;:&nbsp;자식&nbsp;노드가&nbsp;있는지&nbsp;여부
							//&nbsp;sHasChildClass&nbsp;:&nbsp;자식&nbsp;노드가&nbsp;있음을&nbsp;나타내는&nbsp;클래스명
							//&nbsp;sCollapsedClass&nbsp;:&nbsp;접혀있는&nbsp;노드임을&nbsp;나타내는&nbsp;클래스명
							//&nbsp;sButtonClass&nbsp;:&nbsp;버튼을&nbsp;나타내는&nbsp;클래스명
							//&nbsp;sLabelClass&nbsp;:&nbsp;라벨을&nbsp;나타내는&nbsp;클래스명
							//&nbsp;sText&nbsp;:&nbsp;노드의&nbsp;텍스트
							//&nbsp;htData&nbsp;:&nbsp;노드&nbsp;데이터
							
							oCustomEvent.sTemplate&nbsp;=&nbsp;[
								&#39;&lt;li&nbsp;class=&quot;{=sNodeClass}{if&nbsp;bLastNode}&nbsp;{=sLastNodeClass}{/if}&quot;&gt;&#39;,
									&#39;&lt;div{if&nbsp;bHasChild}&nbsp;class=&quot;{=sHasChildClass}&quot;{/if}&gt;&#39;,
										&#39;&lt;button&nbsp;class=&quot;{=sButtonClass}&quot;&gt;+&lt;/button&gt;&#39;,
										&#39;&lt;span&nbsp;class=&quot;{=sLabelClass}&nbsp;drag-span&quot;&nbsp;unselectable=&quot;on&quot;&gt;{=sText}({=htData.sLabel})&lt;/span&gt;&#39;,
									&#39;&lt;/div&gt;&#39;,
								&#39;&lt;/li&gt;&#39;
							].join(&#39;&#39;);
						
						});
				**/
				this.fireEvent(&#39;beforeProcessData&#39;,&nbsp;htParam);
				
				var&nbsp;htProcess&nbsp;=&nbsp;{
					sNodeClass&nbsp;:&nbsp;this.htClassName.sNode,
					bLastNode&nbsp;:&nbsp;(i&nbsp;==&nbsp;aData.length&nbsp;-&nbsp;1)&nbsp;?&nbsp;true&nbsp;:&nbsp;false,&nbsp;
					sLastNodeClass&nbsp;:&nbsp;this.htClassName.sLastNode,
					bHasChild&nbsp;:&nbsp;(typeof&nbsp;htData._aChildren&nbsp;!=&nbsp;&quot;undefined&quot;&nbsp;&amp;&amp;&nbsp;htData._aChildren.length&nbsp;&gt;&nbsp;0)&nbsp;?&nbsp;true&nbsp;:&nbsp;false,
					sHasChildClass&nbsp;:&nbsp;this.htClassName.sHasChild,
					sCollapsedClass&nbsp;:&nbsp;this.htClassName.sCollapsed,
					sButtonClass&nbsp;:&nbsp;this.htClassName.sButton,
					sLabelClass&nbsp;:&nbsp;this.htClassName.sLabel,
					sText&nbsp;:&nbsp;htData.sLabel,
					htData&nbsp;:&nbsp;htData
				};
				
				var&nbsp;sCode&nbsp;=&nbsp;jindo.$Template(htParam.sTemplate).process(htProcess);
				sCode&nbsp;=&nbsp;this._getChildCode(htData._aChildren,&nbsp;sCode);
				aCodes.push(sCode);
			}
			return&nbsp;aCodes.join(&#39;\n&#39;);
		}
	},

	_getChildCode&nbsp;:&nbsp;function(elChild,&nbsp;sCode)&nbsp;{
		var&nbsp;sChild&nbsp;=&nbsp;elChild&nbsp;?&nbsp;this._getCode(elChild)&nbsp;:&nbsp;&#39;&#39;;
		if&nbsp;(sChild)&nbsp;{
			var&nbsp;bChanged&nbsp;=&nbsp;false;
			sCode&nbsp;=&nbsp;sCode.replace(/(&lt;ul(\s[^&gt;]*)*&gt;)(&lt;\/ul&gt;)/i,&nbsp;function(_,&nbsp;sBegin,&nbsp;__,&nbsp;sClose)&nbsp;{
				bChanged&nbsp;=&nbsp;true;
				return&nbsp;sBegin&nbsp;+&nbsp;sChild&nbsp;+&nbsp;sClose;
			});
			if&nbsp;(!bChanged)&nbsp;{
				sCode&nbsp;=&nbsp;sCode.replace(/&lt;\/li&gt;/i,&nbsp;function(_)&nbsp;{&nbsp;return&nbsp;&#39;\n&lt;ul&gt;&#39;&nbsp;+&nbsp;sChild&nbsp;+&nbsp;&#39;&lt;/ul&gt;\n&#39;&nbsp;+&nbsp;_;&nbsp;});
			}
		}
		return&nbsp;sCode;
	},	
	
	_setData&nbsp;:&nbsp;function(elChildListOfParentNode,&nbsp;aDatas)&nbsp;{
		var&nbsp;aNodes&nbsp;=&nbsp;jindo.$$(&quot;&gt;&nbsp;.&quot;&nbsp;+&nbsp;this.htClassName.sNode,&nbsp;elChildListOfParentNode);
		
		for&nbsp;(var&nbsp;i&nbsp;=&nbsp;0,&nbsp;nLen&nbsp;=&nbsp;aNodes.length;&nbsp;i&nbsp;&lt;&nbsp;nLen;&nbsp;i++)&nbsp;{
			var&nbsp;elNode&nbsp;=&nbsp;aNodes[i];
			var&nbsp;htNodeData&nbsp;=&nbsp;aDatas[i];
			
			var&nbsp;sKey&nbsp;=&nbsp;this._makeNodeDataKey(elNode);
			
			htNodeData.bLastNode&nbsp;=&nbsp;(i&nbsp;===&nbsp;nLen&nbsp;-&nbsp;1);&nbsp;
			
			this._htNodeData[sKey]&nbsp;=&nbsp;htNodeData;
			
			var&nbsp;bHasChild&nbsp;=&nbsp;(typeof&nbsp;htNodeData._aChildren&nbsp;!=&nbsp;&quot;undefined&quot;&nbsp;&amp;&amp;&nbsp;htNodeData._aChildren.length)&nbsp;||&nbsp;htNodeData.bHasChild&nbsp;?&nbsp;true&nbsp;:&nbsp;false;
			if&nbsp;(htNodeData.bHasChild&nbsp;==&nbsp;bHasChild)&nbsp;{
				this._setData(this.getChildListOfNode(elNode),&nbsp;htNodeData._aChildren);
			}
		}
	},
	
	/**
		노드를&nbsp;생성한다.
		
		@method&nbsp;createNode
		@param&nbsp;{Array}&nbsp;aDatas&nbsp;생성할&nbsp;노드의&nbsp;정보
		@return&nbsp;{Array}&nbsp;생성된&nbsp;노드들의&nbsp;배열
		@remark&nbsp;노드를&nbsp;생성하기&nbsp;위해&nbsp;하나의&nbsp;노드는&nbsp;label&nbsp;스트링이&nbsp;반드시&nbsp;필요하고,&nbsp;자식&nbsp;노드는&nbsp;_children&nbsp;배열로&nbsp;선언한다.
		@example&nbsp;
			//기본적인&nbsp;데이터만을&nbsp;포함하여&nbsp;노드를&nbsp;생성하는&nbsp;예제
			var&nbsp;aNewNodes&nbsp;=&nbsp;tree.createNode([
				{
					sLabel&nbsp;:&nbsp;&#39;포유류&#39;,
					_aChildren&nbsp;:&nbsp;[
						{&nbsp;sLabel&nbsp;:&nbsp;&#39;고래&#39;&nbsp;},
						{&nbsp;sLabel&nbsp;:&nbsp;&#39;토끼&#39;&nbsp;},
						{&nbsp;sLabel&nbsp;:&nbsp;&#39;다람쥐&#39;&nbsp;},
						{
							sLabel&nbsp;:&nbsp;&#39;맹수&#39;,
							_aChildren&nbsp;:&nbsp;[
								{&nbsp;sLabel&nbsp;:&nbsp;&#39;호랑이&#39;&nbsp;},
								{&nbsp;sLabel&nbsp;:&nbsp;&#39;표범&#39;&nbsp;},
								{&nbsp;sLabel&nbsp;:&nbsp;&#39;사자&#39;&nbsp;},
								{&nbsp;sLabel&nbsp;:&nbsp;&#39;재규어&#39;&nbsp;}
							]
						}
					
					]
				},
				
				{&nbsp;sLabel&nbsp;:&nbsp;&#39;조류&#39;&nbsp;}
			]);
		@example
			//노드별로&nbsp;원하는&nbsp;형태의&nbsp;데이터를&nbsp;설정하여&nbsp;생성하는&nbsp;예제
			var&nbsp;aNodes&nbsp;=&nbsp;tree.createNode([
				{
					sLabel&nbsp;:&nbsp;&#39;포유류&#39;,
					nType&nbsp;:&nbsp;1,
					nValue&nbsp;:&nbsp;15
				},
				{
					sLabel&nbsp;:&nbsp;&#39;조류&#39;,
					nType&nbsp;:&nbsp;2,
					nValue&nbsp;:&nbsp;20
				}
			]);
	**/
	createNode&nbsp;:&nbsp;function(aDatas)&nbsp;{
		var&nbsp;elDummy&nbsp;=&nbsp;jindo.$(&#39;&lt;ul&gt;&#39;);
		elDummy.innerHTML&nbsp;=&nbsp;this._getCode(aDatas);
		var&nbsp;aNodes&nbsp;=&nbsp;jindo.$$(&quot;&gt;&nbsp;.&quot;&nbsp;+&nbsp;this.htClassName.sNode,&nbsp;elDummy);
		this._setData(elDummy,&nbsp;aDatas);
		
		return&nbsp;aNodes;
	},
	
	/**
		노드를&nbsp;생성할&nbsp;때&nbsp;적용된&nbsp;노드의&nbsp;원시&nbsp;데이터를&nbsp;가져온다.
		
		@method&nbsp;getNodeRawData
		@deprecated&nbsp;getNodeData()&nbsp;사용권장
		@return&nbsp;{Object}
	**/
	getNodeRawData&nbsp;:&nbsp;function(elNode)&nbsp;{
		return&nbsp;this.getNodeData(elNode);
	},
	/**
		노드가&nbsp;연속으로&nbsp;선택된&nbsp;횟수를&nbsp;가져온다.
		
		@method&nbsp;getSelectCount
		@return&nbsp;{Number}
		@deprecated
	**/
	getSelectCount&nbsp;:&nbsp;function()&nbsp;{
		return&nbsp;this;
	}
	
}).extend(jindo.UIComponent);
</pre>
		</div>
	</div>
</div>

			</div>
		</div>
		<!-- // main content -->

	</div>
	<!-- // container -->

	<!-- footer -->
	<div id="footer">
		<p>Copyright ©<a href="http://nhncorp.com/" target="_blank">NHN Corp.</a> Platform Ajax Team. All Rights Reserved.</p>
	</div>
	<!-- // footer -->

</div>
<!-- // wrap -->

<style type="text/css">

	.item {
		transition:background .2s linear;
		-webkit-transition:background .2s linear;
		-moz-transition:background .2s linear;
		-o-transition:background .2s linear;
		-ms-transition:background .2s linear;
	}
	
	.highlight {
		background-color:#ffffd8 !important;
	}
	
	li.selected a.highlight {
		background-color:#aa8 !important;
	}
	
	.hide-deprecated .deprecated-item, .hide-inherited .inherited-item, .private {
		display:none;
	}
	
	.scrollbar-v, .scrollbar-h { display:none; }
	.scrollbar-show { display:block; }
	
	.api-page .tbl_fold .more_history { display:none; }
	
	/* FILE */
	.file pre.code {
		border:1px solid #ccc;
		padding:0;
	}
	
	.file ol {
		padding-left: 4em;
		background-color: #f9f9f9;
	}

	.file ol li {
		list-style: decimal;
		border-left:1px solid #ccc;
		padding:2px 4px;
	}
	
	.file li.L1, .file li.L3, .file li.L5, .file li.L7, .file li.L9 {
		background-color: #f9f9f9;	
	}

	.file li.L0, .file li.L2, .file li.L4, .file li.L6, .file li.L8 { 
		background-color: #f0f0f0;
	}
	
</style>
<script type="text/javascript" src="../assets/prettify/prettify-min.js"></script>
<script type="text/javascript" src="../assets/hash.js"></script>
<script type="text/javascript" src="../assets/api-list.js"></script>
<script type="text/javascript" src="../assets/api-search.js"></script>
<script type="text/javascript" src="../assets/../api.js?callback=APISearch.setData"></script>
<script type="text/javascript">
	var projectRoot = "../";
	var projectAssets = "../assets";
	
    apiDocs(projectAssets);	
</script>
</body>
</html>